<template>
   <CardBox title="文章热度榜" icon="default/information/Hot.png" :refresh="this.refresh" >
    <div slot="body">
         <button v-for="item in ArticleHotData?.data?.slice(0,3)" :key="item.id" class="HotOne flex" @click="ToArticleDetail(item)">
          <img :src="item.createdCover" class="image">
          <div class="detail">
             <div class="title  overflow Font">{{item.title}}</div>
             <div class="time">{{item.createdTime | time}}</div>
          </div>
      </button>
    </div>
     <div slot="time" class="time" id="time">更新于 {{ArticleHotData.updateTime | time}}</div>
   </CardBox>
</template>
<script>
import CardBox from '@/components/Package/CardBox/CardBox.vue'
import { mapActions, mapState } from 'vuex'
  export default 
  {
  components: { CardBox },
     name :'',
     computed:{
      ...mapState('Init',['ArticleHotData'])
     },
     methods: {
      ...mapActions('Init',['getArticleHotData']),
        //刷新数据
       async refresh(){
          return  await this.getArticleHotData()
        },
      //前往文章详情
        ToArticleDetail(item){
            this.$router.push({path:'/articleDetail', query: {id:item.id} })
         }
     },
  }
</script>
<style scoped lang='less'>

.Font{
    font-size: 20px;
    color: var(--fontColor);
}
#refreshButton{
    background: none;
    border: none;
    width: 100%;
    text-align: right;
}
.image{
    width: 100px;
    height:60px;
    border-radius: 2px;
}

.HotOne{
    width: 100%;
    justify-content: flex-start;

    color: var(--fontColor);

    position: relative;
    border-radius: 7px;

    padding: 10px;
    box-sizing: border-box;
    flex-wrap: nowrap;

    margin-top: 5px;

    .detail{
        width: calc(100% - 110px);
        margin-left: 10px;  
        
         &:hover{
            .title,.time{color: var(--GeneralBackColor);}
        }
    }

    .title{
        width: 100%;
        text-align: left;
    }

    .time{
        margin-top: 5px;
        width: 100%;
        text-align: left;
        color: rgba(0, 0, 0, 0.5);
    }

   
    i{
        position: absolute;
        right: 10px;
    }
}
#time{
    margin-top: 10px;
    padding: 0 20px;
    width: 100%;
    text-align: right;
    font-size: 15px;
    box-sizing: border-box;
}
</style>